<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/bootstrap2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
    <title>员工列表</title>
    <link href="/css/Common.css" rel="stylesheet"/>
</head>
<body>
<div id="center" class="container-fluid">
    <div class="row-fluid">
        <h4>员工数据列表</h4>
        <div class="add">
            <a class="btn btn-success" onclick="openadd();">新增</a>
        </div>
        <div class="w">
            <div class="span12">
                <table class="table table-condensed table-bordered table-hover tab">
                    <thead>
                    <tr>
                        <th>员工名称</th>
                        <th>部门号</th>
                        <th>职务</th>
                        <th>入职时间</th>
                        <th>联系方式</th>
                    </tr>
                    </thead>
                    <tbody id="tbody">
                    <tr v-for="employee in employeeList">
                        <td>{{employee.empName}}</td>
                        <td>{{employee.deptId}}</td>
                        <td>{{employee.jobName}}</td>
                        <td>{{employee.joinDate}}</td>
                        <td>{{employee.telephone}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div id="addModal" class="modal hide fade" tabindex="-1"
             role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h3 id="myModalLabel">添加员工</h3>
            </div>
            <div class="modal-body">
                <span class="form-horizontal">
                    <div class="control-group">
                        <label class="control-label">员工名称</label>
                        <div class="controls">
                            <input type="text" name="empName" placeholder="员工名称" v-model="employee.empName">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">部门</label>
                        <div class="controls">
                            <select id="dept_id" v-model="employee.deptId">
                                <option value="-1">--请选择--</option>
                                <option name="deptId" v-for="dept in deptList" :value="dept.deptId">{{dept.deptName}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">职务</label>
                        <div class="controls">
                            <input type="text" name="jobName" placeholder="职务" v-model="employee.jobName">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">入职时间</label>
                        <div class="controls">
                            <input type="text" name="joinDate"
                                   placeholder="yyyy-MM-dd" v-model="employee.joinDate">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">联系方式</label>
                        <div class="controls">
                            <input type="text" name="telephone" placeholder="联系方式" v-model="employee.telephone">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                        <button class="btn btn-primary" @click="saveEmployee()">保存</button>
                    </div>
                </span>
            </div>
        </div>
    </div>
</div>

<script src="/js/jquery-1.9.1.min.js"></script>
<script src="/bootstrap2.3.2/js/bootstrap.min.js"></script>
<script src="/js/vuejs-2.5.16.js"></script>
<script src="/js/axios-0.18.0.js"></script>

<!--vue代码在此处开始编写;或者也可以编写单独的js文件-->
<script>
    const app = new Vue({
        el: "#center",
        data:{
            employeeList:{},
            deptList:{},
            employee:{}
        },
        methods:{
            findEmployeeList(){
                let url = '/employee';
                axios.get(url).then(resp => {
                    let result = resp.data;
                    if (result.success)
                        this.employeeList = result.obj;
                    else
                        alert(result.message);
                });
            },
            findDeptList(){
                axios.get("/dept").then(resp => {
                    let result = resp.data;
                    if (result.success)
                        this.deptList = result.obj;
                    else
                        alert(result.message);
                });
            },
            saveEmployee(){
                let url = '/employee';
                axios.post(url,this.employee).then(resp => {
                    let result = resp.data;
                    if (result.success){
                        $("#addModal").modal("hide");
                        this.findEmployeeList();
                    }else
                        alert(result.message);

                });
            }
        },
        created(){
            this.findEmployeeList();
            this.findDeptList();
        }
    });
</script>

</body>
<script type="text/javascript">
    function openadd() {
        $("#myModalLabel").text("添加用户");
        $("#addModal").modal("show");
    }

    $(function () {
        $(".btn.btn-primary").click(function () {
            $("#addModal").modal("hide");
        });
    });
</script>

</html>